<template>
  <section>
    <van-sticky>
      <PageHeader title="营销活动" />
    </van-sticky>

    <van-tabs v-model="activeTab" sticky @click="onTabChange">
      <van-tab title="会员卡" name="card">

      </van-tab>

      <van-tab title="活动" name="activity">
        <div class="pd10">
          <van-button type="primary" round block @click="$router.push({name: 'MarketingCreateActivity'})">+创建活动</van-button>
        </div>

        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestList">
          <div class="flex flex-col bg-color-white mb10 font-common"
               v-for="(item, index) in dataList"
               :key="index">
            <div class="flex flex-row flex-left pd10 font-big strong">{{item.name}}</div>
            <div class="flex flex-row flex-left pd10">
              <div class="flex flex-row flex-left flex-1">
                开始时间：{{item.begin_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}
              </div>

              <div class="flex flex-row flex-right flex-1">
                截止时间：{{item.end_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}
              </div>
            </div>
            <div class="flex flex-row flex-left pd10">状态：<label v-if="item.enable==1">上线</label><label v-else-if="item.enable==0">下线</label></div>
            <div class="flex flex-row flex-center font-common border-top-gray pt10 pb10">
              <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'MarketingEditActivity', params: {id: item.id}})">
                <i class="iconfont icon-bianji mr5" />编辑
              </div>
              <div class="flex flex-row flex-center flex-1" @click="offline(index)" v-if="item.enable==1">
                <i class="iconfont icon-shangxianchanpin- mr5" />下线
              </div>
              <div class="flex flex-row flex-center flex-1" @click="online(index)" v-else-if="item.enable==0">
                <i class="iconfont icon-shangxian mr5" />上线
              </div>
              <div class="flex flex-row flex-center flex-1" @click="$router.push({name: 'MarketingActivityJoiner', params: {activity_id: item.id}})">
                <i class="iconfont icon-baoming mr5" />参与人
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
import PageHeader from "../../componets/PageHeader";
import {
  marketingActivityListsUri,
  marketingActivityOfflineUri,
  marketingActivityOnlineUri,
} from "../../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      activeTab: 'activity',

      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],
    }
  },
  methods: {
    onTabChange(name) {
      this.activeTab = name;
      if(name == 'card') {
        this.$router.replace({name: 'MarketingIndex'});
      }
    },
    requestList() {
      const that = this;
      this.loading = true;
      let url = marketingActivityListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    },
    online(index) {
      let item = this.dataList[index];
      const id = item.id;
      const that = this;
      this.$http.get(marketingActivityOnlineUri + '?id=' + id).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          item.enable = item.enable == 1 ? 0 : 1;
          that.$set(that.dataList, index, item);
        }
      }, response => {
        // error callback
      })
    },
    offline(index) {
      let item = this.dataList[index];
      const id = item.id;
      const that = this;
      this.$http.get(marketingActivityOfflineUri + '?id=' + id).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          item.enable = item.enable == 1 ? 0 : 1;
          that.$set(that.dataList, index, item);
        }
      }, response => {
        // error callback
      })
    },
  },
  mounted: function () {

  }
}
</script>

<style scoped>

</style>
